<!-- 添加筛选器 -->
<template>
  <div class="ComditionFilter-container">
    <ConditionFilter @headleSubmit="headleSubmit" :EmptyBut="true" @headleEmpty="headleEmpty" :butText="'搜索'">
      <template #default>
        <div class="item">
        <span>学号</span>
        <el-input
          v-model="studentIdRef"
          style="width: 150px"
          placeholder="请输入学号"
        />
      </div>
      <div class="item flase">
        <span>学生姓名</span>
        <el-input
          v-model="stuentNameRef"
          placeholder="请输入姓名"
          style="width: 150px"
        ></el-input>
      </div>
      </template>
    </ConditionFilter>
  </div>
</template>

<script setup>
import ConditionFilter from "@/components/ConditionFilter/index.vue";
import { computed, ref, watchEffect } from "vue";
import { getStudentInfo } from "@/api/student.js";
const props = defineProps({
  page: {
    type: Number,
  },
});
const isLoadingRef = ref(false) // 加载中
const studentIdRef = ref(""); // 学号
const stuentNameRef = ref(""); // 姓名
const conditionRef = ref(); // 条件对象
const getStudentInfoData = async (condition, page) => {
  const { data } = await getStudentInfo({
    page,
    limit: 5,
    keyword: {
      ...condition,
    },
  });
  return data;
};
const emit = defineEmits(["headleSubmit"]);
// 点击按钮获取学生信息
const headleSubmit = async (item) => {
  isLoadingRef.value = true
  let stare = true;
  for (const key in item) {
    if (item[key]) {
      stare = false;
    }
  }
  if (studentIdRef.value || stuentNameRef.value) {
    stare = false;
  }
  if (stare) {
    ElMessage.error("请至少输入一个添加");
    return;
  }
  conditionRef.value = {
    dormitoryId: item.dormitoryData ? item.dormitoryData[0].id : "",
    floorId: item.floorData ? item.floorData[0].id : "",
    roomNoId: item.roomData ? item.roomData[0].id : "",
    loginId: studentIdRef.value,
    nickname: stuentNameRef.value,
  };
  emit("headleSubmit", 1);
};
// 监听条件对象和页码的变化获取远程数据
watchEffect(async () => {
  if (!props.page) return;
  let stare = true;
  for (const key in conditionRef.value) {
    if (conditionRef.value[key]) {
      stare = false;
    }
  }
  if (stare) {
    return;
  }
  isLoadingRef.value = true
  const data = await getStudentInfoData(conditionRef.value, props.page);
  isLoadingRef.value = false;
  emit("headleSubmit", data);
});
// 清空
const headleEmpty = () =>{
  studentIdRef.value = "";
  stuentNameRef.value = "";
}
defineExpose({
  isLoading: isLoadingRef
})
</script>

<style lang="less" scoped>
.ComditionFilter-container {
  width: 100%;
  height: 100%;
  .condition-container {
    height: 100px;
  }
  .item {
    margin-right: 30px;
    &.flase {
      margin-top: 10px;
    }

    span {
      margin-right: 10px;
    }
  }
}
</style>